<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="header">
      <view class="back-btn" @tap="goBack">
        <text class="iconfont icon-back"></text>
      </view>
      <text class="title">请假记录</text>
    </view>

    <!-- 状态筛选 -->
    <view class="status-filter">
      <view 
        v-for="(item, index) in statusFilters" 
        :key="index"
        :class="['filter-item', { active: currentStatus === item.value }]"
        @tap="switchStatus(item.value)"
      >
        <text>{{ item.label }}</text>
        <view class="badge" v-if="item.count > 0">{{ item.count }}</view>
      </view>
    </view>

    <!-- 请假记录列表 -->
    <view class="record-list">
      <view class="record-item" v-for="(item, index) in filteredRecords" :key="index" @tap="viewDetail(item)">
        <view class="record-header">
          <view class="leave-type">
            <text>{{ getLeaveTypeName(item.leaveType) }}</text>
          </view>
          <view :class="['leave-status', item.status]">{{ getStatusName(item.status) }}</view>
        </view>
        <view class="record-time">
          <text class="time-label">请假时间：</text>
          <text class="time-value">{{ item.startDate }} {{ item.startTimePeriod }} 至 {{ item.endDate }} {{ item.endTimePeriod }}</text>
        </view>
        <view class="record-time">
          <text class="time-label">请假天数：</text>
          <text class="time-value">{{ item.leaveDays }}天</text>
        </view>
        <view class="record-reason">
          <text class="reason-label">请假事由：</text>
          <text class="reason-value">{{ item.reason }}</text>
        </view>
        <view class="record-footer">
          <text class="submit-time">提交时间：{{ item.submitTime }}</text>
          <view class="action-btns" v-if="item.status === 'pending'">
            <button class="action-btn cancel" @tap.stop="cancelApplication(item)">撤回</button>
            <button class="action-btn remind" @tap.stop="remindApprover(item)">催办</button>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="filteredRecords.length === 0">
      <image src="http://101.37.17.240:9000/zhxy/empty-data.png" mode="aspectFit"></image>
      <text>暂无{{ getStatusName(currentStatus) }}的请假记录</text>
    </view>

    <!-- 详情弹窗 -->
    <view class="detail-mask" v-if="showDetail" @tap="hideDetail"></view>
    <view class="detail-popup" v-if="showDetail">
      <view class="detail-header">
        <text class="detail-title">请假详情</text>
        <text class="detail-close" @tap="hideDetail">×</text>
      </view>
      <view class="detail-content">
        <view class="detail-status">
          <view class="status-tag" :class="selectedRecord.status">{{ getStatusName(selectedRecord.status) }}</view>
          <text class="status-desc">{{ getStatusDescription(selectedRecord.status) }}</text>
        </view>
        
        <view class="detail-info">
          <view class="info-item">
            <text class="info-label">请假类型</text>
            <text class="info-value">{{ getLeaveTypeName(selectedRecord.leaveType) }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">开始时间</text>
            <text class="info-value">{{ selectedRecord.startDate }} {{ selectedRecord.startTimePeriod }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">结束时间</text>
            <text class="info-value">{{ selectedRecord.endDate }} {{ selectedRecord.endTimePeriod }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">请假天数</text>
            <text class="info-value">{{ selectedRecord.leaveDays }}天</text>
          </view>
          <view class="info-item">
            <text class="info-label">请假事由</text>
            <text class="info-value">{{ selectedRecord.reason }}</text>
          </view>
          <view class="info-item" v-if="selectedRecord.attachments && selectedRecord.attachments.length > 0">
            <text class="info-label">证明材料</text>
            <view class="attachment-list">
              <image 
                v-for="(img, imgIndex) in selectedRecord.attachments" 
                :key="imgIndex" 
                :src="img" 
                mode="aspectFill" 
                class="attachment-img"
                @tap.stop="previewImage(img)"
              ></image>
            </view>
          </view>
          <view class="info-item">
            <text class="info-label">审批人</text>
            <text class="info-value">{{ selectedRecord.approver }}</text>
          </view>
          <view class="info-item" v-if="selectedRecord.ccPerson">
            <text class="info-label">抄送人</text>
            <text class="info-value">{{ selectedRecord.ccPerson }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">提交时间</text>
            <text class="info-value">{{ selectedRecord.submitTime }}</text>
          </view>
          <view class="info-item" v-if="selectedRecord.feedback">
            <text class="info-label">审批意见</text>
            <text class="info-value">{{ selectedRecord.feedback }}</text>
          </view>
        </view>
        
        <view class="approval-flow">
          <text class="flow-title">审批流程</text>
          <view class="flow-steps">
            <view class="flow-step completed">
              <view class="step-dot"></view>
              <view class="step-content">
                <view class="step-title">
                  <text>提交申请</text>
                  <text class="step-time">{{ selectedRecord.submitTime }}</text>
                </view>
                <text class="step-desc">申请已提交，等待审批</text>
              </view>
            </view>
            <view class="flow-step" :class="{ completed: selectedRecord.status !== 'pending' }">
              <view class="step-dot"></view>
              <view class="step-content">
                <view class="step-title">
                  <text>{{ selectedRecord.approver }}审批</text>
                  <text class="step-time" v-if="selectedRecord.approvalTime">{{ selectedRecord.approvalTime }}</text>
                </view>
                <text class="step-desc">{{ getApprovalDescription(selectedRecord) }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="detail-footer" v-if="selectedRecord.status === 'pending'">
        <button class="detail-btn cancel" @tap="cancelApplication(selectedRecord)">撤回申请</button>
        <button class="detail-btn remind" @tap="remindApprover(selectedRecord)">催办</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 状态筛选
      currentStatus: 'all',
      statusFilters: [
        { label: '全部', value: 'all', count: 5 },
        { label: '待审批', value: 'pending', count: 1 },
        { label: '已通过', value: 'approved', count: 3 },
        { label: '已拒绝', value: 'rejected', count: 1 }
      ],
      
      // 请假记录列表
      leaveRecords: [
        {
          id: 5,
          leaveType: 'sick',
          startDate: '2023-05-15',
          startTimePeriod: '上午',
          endDate: '2023-05-16',
          endTimePeriod: '下午',
          leaveDays: 2,
          reason: '因发烧需要去医院检查并在家休息',
          attachments: [
            'http://101.37.17.240:9000/zhxy/sick-leave.jpg'
          ],
          approver: '王主任（教务处）',
          ccPerson: '赵老师',
          status: 'pending',
          submitTime: '2023-05-13 10:25:36'
        },
        {
          id: 4,
          leaveType: 'personal',
          startDate: '2023-05-02',
          startTimePeriod: '全天',
          endDate: '2023-05-02',
          endTimePeriod: '全天',
          leaveDays: 1,
          reason: '家中有事需处理',
          attachments: [],
          approver: '李主任（人事处）',
          status: 'approved',
          feedback: '同意',
          submitTime: '2023-04-30 14:38:20',
          approvalTime: '2023-04-30 16:15:42'
        },
        {
          id: 3,
          leaveType: 'annual',
          startDate: '2023-04-24',
          startTimePeriod: '上午',
          endDate: '2023-04-25',
          endTimePeriod: '下午',
          leaveDays: 2,
          reason: '休年假',
          attachments: [],
          approver: '王主任（教务处）',
          status: 'approved',
          feedback: '已安排课程调整，批准休假',
          submitTime: '2023-04-20 09:12:05',
          approvalTime: '2023-04-20 15:36:28'
        },
        {
          id: 2,
          leaveType: 'personal',
          startDate: '2023-04-10',
          startTimePeriod: '下午',
          endDate: '2023-04-10',
          endTimePeriod: '下午',
          leaveDays: 0.5,
          reason: '需要办理个人证件',
          attachments: [],
          approver: '王主任（教务处）',
          status: 'rejected',
          feedback: '当日下午有重要会议，请调整时间',
          submitTime: '2023-04-08 11:23:45',
          approvalTime: '2023-04-08 14:05:19'
        },
        {
          id: 1,
          leaveType: 'sick',
          startDate: '2023-03-15',
          startTimePeriod: '上午',
          endDate: '2023-03-15',
          endTimePeriod: '下午',
          leaveDays: 1,
          reason: '感冒发烧，需要去医院',
          attachments: [
            'http://101.37.17.240:9000/zhxy/medical-record.jpg'
          ],
          approver: '李主任（人事处）',
          ccPerson: '钱老师',
          status: 'approved',
          feedback: '同意，注意休息',
          submitTime: '2023-03-14 19:45:32',
          approvalTime: '2023-03-14 20:12:05'
        }
      ],
      
      // 详情弹窗
      showDetail: false,
      selectedRecord: {}
    }
  },
  computed: {
    filteredRecords() {
      if (this.currentStatus === 'all') {
        return this.leaveRecords
      } else {
        return this.leaveRecords.filter(record => record.status === this.currentStatus)
      }
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    
    // 切换状态筛选
    switchStatus(status) {
      this.currentStatus = status
    },
    
    // 查看详情
    viewDetail(record) {
      this.selectedRecord = { ...record }
      this.showDetail = true
    },
    
    // 隐藏详情
    hideDetail() {
      this.showDetail = false
    },
    
    // 预览图片
    previewImage(img) {
      uni.previewImage({
        urls: this.selectedRecord.attachments,
        current: img
      })
    },
    
    // 撤回申请
    cancelApplication(record) {
      uni.showModal({
        title: '撤回申请',
        content: '确定要撤回此请假申请吗？',
        success: res => {
          if (res.confirm) {
            uni.showLoading({
              title: '处理中...'
            })
            
            // 模拟网络请求
            setTimeout(() => {
              // 更新记录状态
              this.leaveRecords = this.leaveRecords.filter(item => item.id !== record.id)
              
              // 更新筛选器数量
              this.updateFilterCounts()
              
              // 如果是从详情弹窗操作的，则关闭弹窗
              if (this.showDetail) {
                this.hideDetail()
              }
              
              uni.hideLoading()
              uni.showToast({
                title: '已撤回申请',
                icon: 'success'
              })
            }, 1000)
          }
        }
      })
    },
    
    // 催办审批人
    remindApprover(record) {
      uni.showLoading({
        title: '发送中...'
      })
      
      // 模拟网络请求
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '已通知审批人',
          icon: 'success'
        })
      }, 1000)
    },
    
    // 更新筛选器数量
    updateFilterCounts() {
      const counts = {
        all: this.leaveRecords.length,
        pending: this.leaveRecords.filter(r => r.status === 'pending').length,
        approved: this.leaveRecords.filter(r => r.status === 'approved').length,
        rejected: this.leaveRecords.filter(r => r.status === 'rejected').length
      }
      
      this.statusFilters.forEach(filter => {
        filter.count = counts[filter.value]
      })
    },
    
    // 获取请假类型名称
    getLeaveTypeName(type) {
      const typeMap = {
        'personal': '事假',
        'sick': '病假',
        'annual': '年假',
        'marriage': '婚假',
        'maternity': '产假',
        'funeral': '丧假',
        'other': '其他'
      }
      return typeMap[type] || type
    },
    
    // 获取状态名称
    getStatusName(status) {
      const statusMap = {
        'all': '全部',
        'pending': '待审批',
        'approved': '已通过',
        'rejected': '已拒绝'
      }
      return statusMap[status] || status
    },
    
    // 获取状态描述
    getStatusDescription(status) {
      const descMap = {
        'pending': '您的请假申请正在等待审批',
        'approved': '您的请假申请已通过审批',
        'rejected': '您的请假申请已被拒绝'
      }
      return descMap[status] || ''
    },
    
    // 获取审批描述
    getApprovalDescription(record) {
      if (record.status === 'pending') {
        return '等待审批'
      } else if (record.status === 'approved') {
        return record.feedback || '审批通过'
      } else if (record.status === 'rejected') {
        return record.feedback || '审批拒绝'
      }
      return ''
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #f6f7fb;
  padding-bottom: 30rpx;
}

.header {
  display: flex;
  align-items: center;
  height: 90rpx;
  background-color: #4080ff;
  padding: 0 30rpx;
  color: #fff;
  
  .back-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .iconfont {
      font-size: 40rpx;
    }
  }
  
  .title {
    flex: 1;
    text-align: center;
    font-size: 36rpx;
    font-weight: bold;
    padding-right: 60rpx;
  }
}

.status-filter {
  display: flex;
  background: #fff;
  padding: 10rpx 0;
  
  .filter-item {
    flex: 1;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    
    text {
      font-size: 28rpx;
      color: #666;
    }
    
    .badge {
      position: absolute;
      top: 10rpx;
      right: 50%;
      transform: translateX(20rpx);
      min-width: 32rpx;
      height: 32rpx;
      border-radius: 16rpx;
      background: #f44336;
      color: #fff;
      font-size: 20rpx;
      text-align: center;
      line-height: 32rpx;
      padding: 0 6rpx;
    }
    
    &.active {
      position: relative;
      
      text {
        color: #4080ff;
        font-weight: bold;
      }
      
      &:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40rpx;
        height: 4rpx;
        background: #4080ff;
        border-radius: 2rpx;
      }
    }
  }
}

.record-list {
  padding: 30rpx;
  
  .record-item {
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    
    .record-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      
      .leave-type {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }
      
      .leave-status {
        padding: 6rpx 16rpx;
        border-radius: 20rpx;
        font-size: 24rpx;
        
        &.pending {
          color: #ff9800;
          background: rgba(255, 152, 0, 0.1);
        }
        
        &.approved {
          color: #4caf50;
          background: rgba(76, 175, 80, 0.1);
        }
        
        &.rejected {
          color: #f44336;
          background: rgba(244, 67, 54, 0.1);
        }
      }
    }
    
    .record-time {
      display: flex;
      align-items: center;
      margin-bottom: 10rpx;
      
      .time-label {
        font-size: 26rpx;
        color: #999;
        width: 140rpx;
      }
      
      .time-value {
        flex: 1;
        font-size: 26rpx;
        color: #333;
      }
    }
    
    .record-reason {
      display: flex;
      margin-bottom: 20rpx;
      
      .reason-label {
        font-size: 26rpx;
        color: #999;
        width: 140rpx;
      }
      
      .reason-value {
        flex: 1;
        font-size: 26rpx;
        color: #333;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }
    
    .record-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 20rpx;
      border-top: 1rpx solid #f0f0f0;
      
      .submit-time {
        font-size: 24rpx;
        color: #999;
      }
      
      .action-btns {
        display: flex;
        
        .action-btn {
          margin-left: 20rpx;
          padding: 0 20rpx;
          height: 56rpx;
          line-height: 56rpx;
          font-size: 24rpx;
          border-radius: 28rpx;
          
          &.cancel {
            color: #666;
            background: #f5f5f5;
          }
          
          &.remind {
            color: #fff;
            background: #4080ff;
          }
        }
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  
  image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 30rpx;
  }
  
  text {
    font-size: 28rpx;
    color: #999;
  }
}

// 详情弹窗
.detail-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 100;
}

.detail-popup {
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 680rpx;
  max-height: 80vh;
  background: #fff;
  border-radius: 16rpx;
  z-index: 101;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  
  .detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    .detail-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .detail-close {
      font-size: 40rpx;
      color: #999;
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  
  .detail-content {
    flex: 1;
    overflow-y: auto;
    padding: 30rpx;
    
    .detail-status {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 30rpx 0;
      margin-bottom: 30rpx;
      
      .status-tag {
        padding: 8rpx 30rpx;
        border-radius: 20rpx;
        font-size: 28rpx;
        margin-bottom: 10rpx;
        
        &.pending {
          color: #ff9800;
          background: rgba(255, 152, 0, 0.1);
        }
        
        &.approved {
          color: #4caf50;
          background: rgba(76, 175, 80, 0.1);
        }
        
        &.rejected {
          color: #f44336;
          background: rgba(244, 67, 54, 0.1);
        }
      }
      
      .status-desc {
        font-size: 26rpx;
        color: #666;
      }
    }
    
    .detail-info {
      background: #f8f8f8;
      border-radius: 12rpx;
      padding: 30rpx;
      margin-bottom: 30rpx;
      
      .info-item {
        margin-bottom: 16rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .info-label {
          font-size: 26rpx;
          color: #999;
          display: block;
          margin-bottom: 6rpx;
        }
        
        .info-value {
          font-size: 28rpx;
          color: #333;
          line-height: 1.4;
        }
        
        .attachment-list {
          display: flex;
          flex-wrap: wrap;
          margin-top: 10rpx;
          
          .attachment-img {
            width: 140rpx;
            height: 140rpx;
            border-radius: 8rpx;
            margin-right: 20rpx;
            margin-bottom: 20rpx;
          }
        }
      }
    }
    
    .approval-flow {
      .flow-title {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 20rpx;
        display: block;
      }
      
      .flow-steps {
        .flow-step {
          display: flex;
          position: relative;
          padding-bottom: 30rpx;
          
          &:not(:last-child):before {
            content: '';
            position: absolute;
            top: 16rpx;
            left: 16rpx;
            bottom: 0;
            width: 2rpx;
            background: #e0e0e0;
          }
          
          &.completed {
            &:not(:last-child):before {
              background: #4080ff;
            }
            
            .step-dot {
              background: #4080ff;
              border-color: rgba(64, 128, 255, 0.2);
            }
          }
          
          .step-dot {
            width: 32rpx;
            height: 32rpx;
            border-radius: 50%;
            background: #e0e0e0;
            border: 6rpx solid rgba(224, 224, 224, 0.2);
            margin-right: 20rpx;
            flex-shrink: 0;
          }
          
          .step-content {
            flex: 1;
            
            .step-title {
              display: flex;
              justify-content: space-between;
              margin-bottom: 6rpx;
              
              text {
                font-size: 28rpx;
                color: #333;
                
                &.step-time {
                  font-size: 24rpx;
                  color: #999;
                }
              }
            }
            
            .step-desc {
              font-size: 24rpx;
              color: #666;
            }
          }
        }
      }
    }
  }
  
  .detail-footer {
    display: flex;
    border-top: 1rpx solid #f0f0f0;
    
    .detail-btn {
      flex: 1;
      height: 90rpx;
      line-height: 90rpx;
      text-align: center;
      font-size: 28rpx;
      border-radius: 0;
      margin: 0;
      
      &.cancel {
        background: #f5f5f5;
        color: #666;
      }
      
      &.remind {
        background: #4080ff;
        color: #fff;
      }
    }
  }
}
</style> 